<template>
  <div class="page-wrapper" style="background-color: #F4F6F9;">
<!--  <div class="bj_tpTitle">-->
<!--    <img src="../../img/student/bj_tp@2x.png" class="bj_tp"/>-->
<!--    <div class="bj_tpTitlepade">-->
<!--      <div class="bj_tpTitlepadediv">课程学习</div>-->
<!--      <div class="bj_tpTitlepadeName">作业用于学习展示,请认真填写</div>-->
<!--    </div>-->
<!--  </div>-->
  <!--  //播放器-->
  <div class="player">
    <video-player
      class="vjs-custom-skin"
      :options="playerOptions"
      ref="videoPlayer"
      @ready="onPlayerReady"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnd($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @statechanged="playerStateChanged($event)"
    ></video-player>

    <div class="tabs">
      <div
        class="tab"
        :class="{ active: activeTab === 'requirements' }"
        @click="activeTab = 'requirements'"
      >
        学习要求
      </div>
      <div
        class="tab"
        :class="{ active: activeTab === 'video' }"
        @click="activeTab = 'video'"
      >
        其他文件
      </div>
    </div>
  </div>

  <div class="schoolAssignmentCenter" v-show="activeTab === 'requirements'">
    <div class="schoolAssignmentCenterBlick">
      <div class="xuexi">
        <div class="xuexi1"><span></span>学习重点及要求</div>
        <div class="xuexi2">字段字段字段字段字段字段字段</div>
      </div>
      <div class="xuexi">
        <div class="xuexi1"><span></span>学习重点及要求</div>
        <div class="xuexi2">字段字段字段字段字段字段字段</div>
      </div>
      <div class="xuexi">
        <div class="xuexi1"><span></span>学习重点及要求</div>
        <div class="xuexi2">字段字段字段字段字段字段字段</div>
      </div>
    </div>
  </div>

    <div class="schoolAssignmentCenter" v-show="activeTab === 'video'">
      <div class="schoolAssignmentCenterBlick">
        <div class="xuexi">
          <div class="xuexi1">名称</div>
          <div class="xuexi2">查看</div>
        </div>
        <div class="xuexi">
          <div class="xuexi1">名称</div>
          <div class="xuexi2">查看</div>
        </div>
      </div>
    </div>

    <div
      class="submit-btn"
      style="
        position: fixed;
        bottom: 20px;
        left: 16px;
        right: 16px;
        height: 40px;
        background: linear-gradient(90deg, #71D1FF 0%, #2B83FF 100%);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        font-size: 18px;
      "
    >
      提交作业
    </div>
  </div>
</template>

<script>
// import { load } from 'pptxjs';
import { defineComponent, ref } from 'vue';
// import pptx2html from 'pptx2html';
export default {
  setup() {

    const showCenter = ref(false);
    const showPopup = () => {
      console.log(123)
      showCenter.value = true;
    };
    return {
      showCenter,
      showPopup,
    };
  },
  data() {
    return {
      activeTab: 'video',
      pptUrl:'',

      isPlaying: false,
      currentTime: 0,
      maxTime: 0,
      playerOptions: {
        height: "200px",
        width: "100%",
        playbackRates: [1.0, 2.0], // 可选的播放速度
        autoplay: true,  // 是否自动播放
        controls: true,   // 是否显示控制条
        muted: false, // 默认情况下静音播放
        loop: false, // 是否视频一结束就重新开始
        sources: [
          {
            type: "video/mp4",
            src: ""  // 视频源地址
          }
        ],
        controlBar: {
          currentTimeDisplay: true,
          progressControl: true,  // 是否显示进度条
          playbackRateMenuButton: true, // 是否显示调整播放倍速按钮
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
        poster: "https://your-poster-image.jpg",  // 视频封面
        notSupportedMessage: '此视频暂无法播放，请稍后再试。'  // 不支持播放的消息
        // 其他配置选项...
      }
    };
  },
  methods: {
    blockshowCenter(event) {
      this.showCenter = true
    },


    //播放器
    playOrPause() {
      if (this.isPlaying) {
        this.$refs.videoPlayer.pause();
      } else {
        this.$refs.videoPlayer.play();
      }
    },
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    },

    // 准备好了
    onPlayerReady() {
      console.log("准备好了");
    },
    // 视频播放
    onPlayerPlay(player) {
      console.log('播放了');
      console.log(player);
      let playTime = 0;
      if (
        Number(Math.floor(this.playedTime)) ===
        Number(Math.floor(player.duration()))
      ) {
        this.playedTime = 0;
        playTime = 0;
      } else if (
        Number(Math.floor(player.currentTime())) !==
        Number(Math.floor(this.playedTime))
      ) {
        playTime = this.playedTime;
        player.currentTime(playTime)
      }
    },
    // 视频暂停的
    onPlayerPause(player) {
      console.log('暂停中');
      console.log(player);
      this.playedTime = player.currentTime();
    },
    // 视频播放完
    onPlayerEnd(player) {
      console.log('播放结束了');
      console.log(player);
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting(player) {
      console.log("播放停止中");
      console.log(player);
    },
    // 视频已开始播放
    onPlayerPlaying(player) {
      console.log("开始播放了");
      console.log(player);
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata(player) {
      console.log("开始下载数据");
      console.log(player);
    },
    // 当前播放位置发生变化时触发
    onPlayerTimeupdate(player) {
      console.log("播放位置变化了");
      console.log(player);
      let timeDisplay = player.currentTime();
      if (timeDisplay - this.currentTime > 1) {
        player.currentTime(this.currentTime > this.maxTime ? this.currentTime : this.maxTime);
      }
      this.currentTime = player.currentTime();
      this.maxTime = this.currentTime > this.maxTime ? this.currentTime : this.maxTime;
    },
    //播放状态改变
    playerStateChanged(playerCurrentState) {
      console.log("播放状态变化了");
      console.log(playerCurrentState);
    },
    // 手动暂停视频的播放
    pause() {
      // 视频播放器的方法调用，要使用this.$refs.videoPlayer.player这个对象去调用
      this.$refs.videoPlayer.player.pause()
    }
  },
};
</script>

<style>
.video-preview {
  display: inline-block;
  margin: 5px;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.videoCenterbackpa {
  position: relative;
  width: 100%;
  height: 100%;
}

.videoCenter {
  height: 200px;
}

.vjs-custom-skin {
  width: 100%;
  box-shadow: 1px 2px 3px #ccc;
  margin: 0 auto;
  overflow: hidden;
}

.vjs-control-bar {
  background: #0bbbfc !important;
}

.player {
  position: relative;
}
.schoolAssignmentCenterBlick{
  background: #fff;
  margin: 0px 16px;
  border-radius: 6px;
}

.tabs {
  display: flex;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.tab.active {
  color: #0BBBFC;
  font-weight: bold;
  position: relative;
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: #0BBBFC;
}

.bj_tpTitle {
  position: relative;
  z-index: -1;
}

.bj_tp {
  width: 100%;
}

.bj_tpTitlepade {
  position: absolute;
  top: 17px;
  left: 20px;
}

.bj_tpTitlepadediv {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 25px;
  text-align: left;
  font-style: normal;
}

.bj_tpTitlepadeName {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 17px;
  text-align: left;
  font-style: normal;
}

.schoolAssignmentCenter {
  padding: 16px 0px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: #fff;
  z-index: 10;
  background: #F4F6F9;
}

.schoolAssignmentTitle {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #302E37;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  padding: 0 16px;
}

.schoolAssignmentfu {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #302E37;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-top: 15px;
  margin-bottom: 8px;
  padding: 0 16px;
}

.van-uploader__upload {
  width: 103px !important;
  height: 103px !important;
  margin: 0px;
}

.van-uploader__file {
  width: 103px !important;
  height: 103px !important;
}


.van-uploader__preview {
  margin: 0px;
}

.xuexi {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

.xuexi1 {
  display: flex;
  align-items: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #302E37;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  margin-top: 16px;

span {
  width: 5px;
  height: 18px;
  background: #0BBBFC;
  border-radius: 3px;
  display: block;
  margin-right: 7px;
}

}
.xuexi2 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  padding-bottom: 10px;
}

.xuexiback {
  width: 100%;
  height: 10px;
  background: #F4F6F9;
}



.ppt-viewer {
  padding: 10px;
}

.slide-image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.app-container{
  background: #F4F6F9;
}
</style>
